/*
 * @Author: wangtao
 * @Date: 2020-10-21 10:28:00
 * @LastEditors: kanglang
 * @LastEditTime: 2021-03-18 11:24:46
 * @Description: 认证步骤条
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';
import {
  faceCard,
  iconCamera,
  iconProcessing,
  iconWait,
  iconRightSmall,
  iconError,
} from '@/images';
import {
  isAndroid,
  screenWidth,
  px2dp,
  fontColorBlack,
} from '@/styles';

export default class CertSteps extends React.Component {
  render() {
    const { type, currentData } = this.props;
    const currState = currentData && currentData.state || 0;
    const certi = currentData && currentData.certificationState || '1';
    console.log('============');
    console.log('currState: ', currState);
    console.log('certi: ', certi);
    const cooperType = currentData && currentData.cooperationType || '';
    const oneStepLine = () => {
      if (cooperType == '解约') {
        return { backgroundColor: '#2CBD26' };
      }
      if (certi != '3' && currState != 0) {
        return { backgroundColor: '#2CBD26' };
      }
      if (certi == '1' && currState == 0) {
        return { backgroundColor: '#EF9730' };
      }
      if (certi == '3' && currState == 0) {
        return { backgroundColor: '#E6E6E5' };
      }
    };

    const twoStep = () => {
      if (cooperType == '解约') {
        return iconProcessing;
      }
      if (currState != 0 && currState != 1 && certi != '3') {
        return iconRightSmall;
      }
      if (currState == 1 && certi != '3') {
        return iconProcessing;
      }
      return iconWait;
    };

    const twoStepLine = () => {
      if (cooperType == '解约') {
        return { backgroundColor: '#EF9730' };
      }
      if (currState == 2 && certi != '3') {
        return { backgroundColor: '#2CBD26' };
      }
      if (currState == 1 && certi != '3') {
        return { backgroundColor: '#EF9730' };
      }
      if (currState == 0 || certi == '3') {
        return { backgroundColor: '#E6E6E5' };
      }
    };
    return (
      <View style={styles.container}>
        {/* one */}
        <View style={styles.item}>
          <Image
            source={this.cerStatusImg(certi, cooperType)}
            resizeMode='stretch'
            style={styles.itemIcon}
          />
          <Text style={styles.itemText}>车辆认证</Text>

          {/* 流程线，勾 */}
          <View style={styles.lineWrap}>
            <View
              style={[
                styles.horizontalLine,
                oneStepLine()
              ]}
            />
            {(certi == 1 && currState == 0) && (
              <View style={styles.verticalLine} />
            )}
          </View>
        </View>
        {/* two */}
        {
          <View style={styles.item}>
            <Image
              source={twoStep()}
              resizeMode='stretch'
              style={styles.itemIcon}
            />
            <Text style={styles.itemText}>签订合同</Text>

            {/* 流程线，勾 */}
            <View style={styles.lineWrap}>
              <View
                style={[
                  styles.horizontalLine,
                  twoStepLine()
                ]}
              />
              {((currState == 1 && certi != '3') || cooperType == '解约') && (
                <View style={styles.verticalLine} />
              )}
            </View>
          </View>
        }
        {/* three */}
        {/* <View style={styles.item}>
          <Image
            source={
              currState == 3
                ? iconRightSmall
                : currState == 2
                  ? iconProcessing
                  : iconWait
            }
            resizeMode="stretch"
            style={styles.itemIcon}
          />
          <Text style={styles.itemText}>安装设备</Text>

          <View style={styles.lineWrap}>
            <View
              style={[
                styles.horizontalLine,
                currState == 3
                  ? { backgroundColor: '#2CBD26' }
                  : currState == 2
                    ? { backgroundColor: '#EF9730' }
                    : { backgroundColor: '#E6E6E5' },
              ]}
            />
            {currState == 2 && (
              <View style={styles.verticalLine} />
            )}
          </View>
        </View> */}
        {/* four */}
        <View style={styles.item}>
          <Image
            source={iconWait}
            resizeMode='stretch'
            style={styles.itemIcon}
          />
          <Text style={styles.itemText}>完成入驻</Text>
        </View>
      </View>
    );
  }

  cerStatusImg = (certificationState, cooperType) => {
    if (cooperType == '解约') {
      return iconRightSmall; // 成功
    }
    if (certificationState == 2) {
      return iconRightSmall; // 成功
    } if (certificationState == 3) {
      return iconError; // 错误
    }
    return iconProcessing; // 进行中
  };
}

const styles = StyleSheet.create({
  container: {
    width: screenWidth,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: px2dp(40),
    paddingHorizontal: px2dp(55)
  },
  item: {
    width: px2dp(120),
    height: px2dp(100),
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  itemIcon: {
    width: px2dp(48),
    height: px2dp(48),
  },
  itemText: {
    color: fontColorBlack,
    fontSize: px2dp(26),
  },
  lineWrap: {
    position: 'absolute',
    backgroundColor: 'pink',
    left: px2dp(102),
    top: px2dp(20),
  },
  horizontalLine: {
    width: px2dp(152),
    height: px2dp(3),
    backgroundColor: '#EF9730',
    // position:'absolute',
    borderRadius: px2dp(2),
  },
  verticalLine: {
    width: px2dp(14),
    height: px2dp(4),
    backgroundColor: '#EF9730',
    position: 'absolute',
    transform: [{ rotateZ: '45deg' }],
    right: -px2dp(4),
    top: -px2dp(4),
    borderRadius: px2dp(2),
  },
});
